<template>
  <div>
    <el-dialog
      width="900px"
      :title="dialogTitle"
      :visible.sync="centerDialogVisible"
      :before-close="dialogClose"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <slot></slot>
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :row-key="recordId"
        ref="multipleTable"
        v-loading="loading"
      >
        <el-table-column
          label="上传时间"
          align="center"
          :formatter="formatTd"
          min-width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime || scope.row.updateTime }}
          </template>
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip label="附件名称" align="center" min-width="100">
                <template slot-scope="scope">
                    {{scope.row.name || getName(scope.row.url)}}
                </template>
            </el-table-column> -->
        <el-table-column prop="name,url" label="附件名称" width="230">
          <template slot-scope="scope">
            <copyText
              v-if="scope.row.name"
              :tableIndex="scope.$index"
              :copyTextName="scope.row.name"
              :columnName="'name'"
            ></copyText>
            <copyText
              v-else
              :tableIndex="scope.$index"
              :copyTextName="getName(scope.row.url)"
              :columnName="'url'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column label="格式" align="center" min-width="220">
          <template slot-scope="scope">
            <span>{{
              getFileType(
                scope.row.name ||
                  scope.row.originalName ||
                  getName(scope.row.url)
              )
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210px" fixed="right">
          <template slot-scope="scope">
            <el-link type="primary" @click="download(scope.row)"
              >下载附件</el-link
            >
            <el-link
              type="primary"
              v-if="!checkImg(scope.row)"
              @click="lookResult(scope.row.url)"
              >查看</el-link
            >
            <div class="inline-block previewBox">
              <el-link
                type="primary"
                v-if="checkImg(scope.row)"
                @click="checkLook(scope.row.url)"
                >查看</el-link
              >
            </div>
            <el-link
              type="primary"
              v-if="showDelete"
              @click="deleteItem(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
        <div slot="empty" class="emptyBg">
          <p>暂无附件</p>
        </div>
      </el-table>
      <el-image
        class="previewImg"
        style="width: 56px; height: 0px"
        :src="src"
        :preview-src-list="[src]"
        id="publicSignBox"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      tableData: [],
      centerDialogVisible: true,
      src: '',
    }
  },
  props: {
    showDelete: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: function () {
        return []
      },
    },
    dialogTitle: {
      type: String,
    },
    isOtherOrigin: {
      //是否第三方附件
      type: Boolean,
      default: false,
    },
  },
  created() {},
  methods: {
    lookResult(url) {
      window.open(url)
    },
    checkLook(url) {
      this.src = url
      setTimeout(() => {
        $('#publicSignBox').click()
      }, 300)
    },
    download(item) {
      if (!this.isOtherOrigin) {
        window.open(
          common.commonApi +
            'api-f/files/downloadtolocal?url=' +
            item.path +
            '&fileName=' +
            item.name
        )
        return
      }
      window.open(item.url)
    },
    getFileType(file) {
      if (file) {
        const fileName = file.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
        const fileNameLen = file.length // 取到文件名长度
        const fileType = file.substring(fileName + 1, fileNameLen) // 截
        return '.' + fileType
      }
    },
    checkImg(item) {
      var str = item.name || this.getName(item.url)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
        return false
      }
    },
    dialogClose() {
      this.$emit('closeDialog')
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
    deleteItem(item) {
      this.$emit('deleteHandle', item.id)
    },
  },
  watch: {
    // tableData(val) {
    //     this.tableData = this.tableData.slice(0, this.pageNo * this.pageSize);
    // }
  },
}
</script>
<style lang="less" scoped>
.contractPag {
  text-align: right;
  margin-top: 24px;
}
.inline-block {
  display: inline-block;
}
.previewBox {
  // width: 56px;
  // height: 20px;
  position: relative;
  .previewImg {
    position: absolute;
    top: 25px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
